const masking = document.querySelector('.masking'),
  btn = document.querySelector('.masking button'),
  hero = document.querySelector('.hero'),
  highway = document.querySelector('.highway'),
  music = document.querySelector('.music'),
  data_span = document.querySelectorAll('.data span'),
  target = document.querySelector('.target'),
  barrier = document.querySelector('.barrier'),
  sky = document.querySelector('.sky')
let speed,//速度
  now_distance,//当前路程
  target_distance,//目标路程
  t_move,//移动定时器
  cloud_t,//云朵定时器
  flag//控制
// min-max的随机数函数
function getNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
btn.addEventListener('click', move)
function move(man) {
  masking.classList.add('mask_hid')//隐藏蒙版
  cloud_t = setInterval(createCloud, 2000)//开启创建云朵定时器
  barrier.innerHTML = ''//先清空上一局的障碍物
  addlife(2)//非1只加一颗生命值
  if (man != 1) {
    addlife(1)//重新开始重置生命值
    speed = 3//重置为初始速度
    now_distance = 0//重置为初始路程
    target_distance = 1500//重置为目标路程
  }
  creatMonster()//开始创建一个障碍物
  music.play();// 播放游戏音乐
  // hero.style.left = '400px' //英雄从左边向右走400m
  t_move = setInterval(() => {
    now_distance += speed//当前路程增加的快慢和速度绑定
    data_span[0].innerHTML = `当前进度：${now_distance}m`
    data_span[1].innerHTML = `目标进度：${target_distance}m`
    // 让地板向左移动，移动的速度=now_distance,和上面的速度绑定
    highway.style.backgroundPositionX = `-${now_distance}px`
    if (now_distance >= target_distance) {
      // flag = true//生成道具
      target.innerHTML = `已达到目标值,${target_distance},加速`
      target.classList.add('target2')//显示提示
      target_distance += 1000 * speed
      speed = speed >= 6 ? speed : speed + 1
      setTimeout(() => target.classList.remove('target2'), 1500)
    }
    moveMonster()
  }, 10)
}
// 创建障碍物函数
function creatMonster() {
  let get1_2 = getNum(1, 2)
  let get400_800 = getNum(400, 800)
  let monsterAll = document.querySelectorAll('.barrier img[class^="barrier"]')
  let monster = document.createElement('img') //创建图片
  monster.src = `./images/obstacle${getNum(1, 4)}.png`
  monster.classList.add(`barrier${get1_2}`) //随机上下位置
  if (monsterAll.length == 0) {//第一个怪物位置
    monster.style.left = `${getNum(300, 550) + 400}px`
  } else {
    monster.style.left = `${monsterAll[monsterAll.length - 1].offsetLeft + get400_800}px`
  }
  barrier.appendChild(monster)
  if (flag === true) {
    flag = false
    let prop = document.createElement('img')
    prop.src = `./images/prop${getNum(1, 2)}.png`
    prop.classList.add(`barrier${get1_2 === 1 ? 2 : 1}`)
    prop.style.left = `${monsterAll[monsterAll.length - 1].offsetLeft + get400_800}px`
    barrier.appendChild(prop)
  }
}
// 障碍物移动函数
function moveMonster() {
  let monsterAll = document.querySelectorAll('.barrier img[class^="barrier"]'),
    nextItem = null
  for (let i = 0; i < monsterAll.length; i++) {
    if (monsterAll[i].offsetLeft < -monsterAll[i].offsetWidth) {
      monsterAll[i].remove()
    } else monsterAll[i].style.left = monsterAll[i].offsetLeft - speed + 'px'
    if (!nextItem) {
      if (monsterAll[i].offsetLeft > hero.offsetLeft + monsterAll[i].clientWidth) {
        nextItem = monsterAll[i]
      }
    }
    monsterAll[monsterAll.length - 1].offsetLeft < 400 ? creatMonster() : ''
    if (monsterAll[monsterAll.length - 1].offsetLeft <= 460) {
      if (monsterAll[monsterAll.length - 1].className == 'barrier1' && !hero.classList.contains('hero_s') == true ||
        monsterAll[monsterAll.length - 1].className == 'barrier2' && !hero.classList.contains('hero_w') == true) {
        // game_over()
        let lifei = document.querySelectorAll('.life .red')
        // if (lifei.length > 1) {
        monsterAll[monsterAll.length - 1].style.visibility = 'hidden'
        // barrier.innerHTML = ''
        creatMonster()
        // }
        life()
      }
    }
  }
}
// 游戏结束函数
function game_over() {
  clearInterval(t_move)
  clearInterval(cloud_t)
  masking.classList.remove('mask_hid')
  masking.innerHTML = `
                    <div>
                      <h1>您的成绩：${now_distance}m</h1>
                      <button onclick="move(1)" style = "top:60%;">原地复活</button>
                      <button onclick="move(2)">重新挑战</button>
                    </div>
  `
}
// 按键跳跃，下蹲逻辑
window.addEventListener('keydown', (e) => {
  if (e.key === 'Control' || e.key === 's' || e.key === 'ArrowDown') {
    hero.classList.add('hero_s')
  } else if (e.key === ' ' && !e.repeat || e.key === 'w' && !e.repeat && !e.repeat || e.key === 'ArrowUp' && !e.repeat) {//防止一直按着空格
    hero.classList.add('hero_w')
    setTimeout(() => { hero.classList.remove('hero_w') }, 500)
  }
})
//键盘松开人物站起来
window.addEventListener('keyup', e => {
  if (e.key === 'Control' || e.key === 's' || e.key === 'ArrowDown') {
    hero.classList.remove('hero_s')
    hero.classList.contains('hero_w') === true ? hero.classList.remove('hero_w') : ''
  }
})

// 创建云朵函数
function createCloud() {
  let cloud = document.createElement('div')
  cloud.style.top = `${getNum(0, 150)} px`//云朵随机高度
  // cloud.style.right = `${getNum(0, 30)} vw`//随机水平位置
  cloud.style.right = `-100%`//随机水平位置
  cloud.style.transform = `rotate(${getNum(0, 100)}deg) scale(${Math.random() + 0.3})`
  sky.appendChild(cloud)
  let cloudAll = document.querySelectorAll('.sky div')
  for (let i = 0; i < cloudAll.length; i++) {
    cloudAll[i].addEventListener('animationend', function () {
      cloudAll[i].remove()
    })
  }
}
// 减生命值函数
function life() {
  let life = document.querySelectorAll('.life .red')
  if (life.length > 1) {
    life[life.length - 1].classList.remove('red')
  } else {
    life[life.length - 1].classList.remove('red')
    game_over()
  }
}
// 加生命值函数
function addlife(a) {
  let life = document.querySelectorAll('.life i')
  if (a === 1) {
    for (let i = 0; i < life.length; i++) {
      life[i].classList.add('red')
    }
  } else {
    life[life.length - 1].classList.add('red')
  }
}
